<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  <div id="app">
    <el-input  v-if="inputVisible" :visible="inputVisible" ref="inputRef"></el-input>
    <button @click="onClick">按钮</button>
  </div>
</body>
<script>

  Vue.component('el-input',{
    created() {
      console.log('input created')
    },
    template: `
      <div>
        <input ref="inputRef"/>
      </div>
    `,
    methods: {
      focus(){
        this.$refs.inputRef.focus()
      }
    }
  })
  new Vue({
    el: '#app',
    data(){
      return {
        inputVisible: false
      }
    },
    methods: {
      onClick(){
        this.inputVisible = true
        //创建组件过程它是异步的,属于dom循环之后的微任务
        //异步有哪些
        //(1)宏任务
          //(1)定时器setTimeout
          //(2)ajax请求
        //(2)微任务
          //(1)Promise.then
        //代码执行规则
        // 首先同步代码
        // 1个宏任务执行完了,查看所有需要立即执行微任务,执行完,然后再去执行下一个宏任务
        // 注意同级别执行的,先执行宏任务,然后执行微任务

        // 解决方式1-产生一个微任务
        /*
        let p = new Promise((resolve,reject)=>{
          resolve()
        })
        p.then(()=>{
          this.$refs.inputRef.focus()
        })
        */
       // 解决方式2-产生一个微任务,通过es6提供语法糖
       /*
       Promise.resolve().then(()=>{
        this.$refs.inputRef.focus()
       })
       */
      //  解决方式3-产生一个微任务,通过vue提供工具函数
      /*
       this.$nextTick(()=>{
        this.$refs.inputRef.focus()
       })

      */
      // 解决方式4-产生一个宏任务任务
      setTimeout(() => {
        this.$refs.inputRef.focus()
      })
    }
    }
  })
</script>
</html>
